<template>
    <div>
        <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="form"
            :rules="rules"
            ref="form"
        >
            <el-form-item label="大棚编号" prop="number">
                <el-input
                    style="width: 300px"
                    v-model.number="form.number"
                    placeholder="请输入大棚编号"
                ></el-input>
            </el-form-item>
            <el-form-item label="种植品种" prop="type">
                <el-input
                    style="width: 300px"
                    v-model="form.type"
                    placeholder="草莓"
                ></el-input>
            </el-form-item>
            <!-- 级联选择器 -->
            <el-form-item label="大棚地址" prop="address">
                <el-cascader
                    style="width: 300px"
                    v-model="form.address"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="大棚面积" prop="area">
                <el-input
                    style="width: 300px"
                    v-model.number="form.area"
                    placeholder="请输入大棚面积"
                ></el-input>
            </el-form-item>
            <el-form-item label="播种时间" prop="time">
                <el-input
                    style="width: 300px"
                    v-model="form.time"
                    placeholder="请输入播种时间"
                ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
                <el-input
                    style="width: 300px"
                    type="textarea"
                    v-model="form.desc"
                    :rows="3"
                    resize="none"
                    placeholder="请输入内容"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    style="width: 80px"
                    type="primary"
                    @click="submitForm('form')"
                    >保存</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script type="text/javascript">
import area from "../../../assets/area.json"
import eventBus from "../../../utils/eventBus"
import { newHouseApi } from "../../../api/newGreenHouse"
export default {
    data() {
        var checkTime = (rule, value, callback) => {
            var timeReg =
                /^\d{4}([/:-\S])(1[0-2]|0?[1-9])\1(0?[1-9]|[1-2]\d|30|31)$/
            if (!timeReg.test(value)) {
                callback(new Error("请输入正确的时间"))
            } else {
                callback()
            }
        }
        return {
            labelPosition: "left",
            form: {
                number: "",
                type: "",
                address: "",
                area: "",
                time: "",
                desc: "",
            },
            options: area,
            rules: {
                number: [
                    {
                        required: true,
                        message: "请填写大棚编号",
                        trigger: "blur",
                    },
                    { type: "number", message: "大棚编号必须为数字值" },
                ],
                type: [
                    {
                        required: true,
                        message: "请填写品种",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请选择一个大棚地址",
                        trigger: "change",
                    },
                ],
                area: [
                    {
                        required: true,
                        message: "请填写大棚面积",
                        trigger: "blur",
                    },
                    { type: "number", message: "大棚必面积须为数字值" },
                ],
                time: [
                    {
                        required: true,
                        message: "请填写播种时间",
                        trigger: "blur",
                    },
                    { validator: checkTime, trigger: "blur" },
                ],
                desc: [
                    {
                        required: true,
                        message: "请填写备注",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    components: {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    newHouseApi({ newHouse: this.form }).then((res) => {
                        if (res.code == 200) {
                            // console.log(res.msg)
                            eventBus.$emit("manage")
                        }
                    })
                } else {
                    console.log("error submit!!")
                    return false
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.el-textarea {
    height: 80px !important;
}
</style>
